---
displayed_sidebar: docsSidebar
---

# Welcome to AI.JSX

[![Docs Site](https://img.shields.io/badge/Docs%20Site-docs.ai--jsx.com-orange)](https://docs.ai-jsx.com)
[![Discord Follow](https://dcbadge.vercel.app/api/server/MsKAeKF8kU?style=flat)](https://discord.fixie.ai)
[![Twitter Follow](https://img.shields.io/twitter/follow/fixieai?style=social)](https://twitter.com/fixieai)

AI.JSX is a framework for building AI applications using
[JSX](https://react.dev/learn/writing-markup-with-jsx). While AI.JSX [is not React](https://docs.ai-jsx.com/is-it-react), it's designed to look and feel very similar while also integrating seamlessly with React-based projects. With AI.JSX,
you don't just use JSX to describe what your UI should look like,
you also use it to describe how **Large Language Models**, such as
ChatGPT, should integrate into the rest of your application. The
end result is a powerful combination where _intelligence_ can be
deeply embedded into the application stack.

AI.JSX is designed to give you two important capabilities out of the box:

1. An intuitive mechanism for orchestrating multiple LLM calls
   expressed as modular, re-usable components.
1. The ability to seamlessly interweave UI components with your AI components. This
   means you can rely on the LLM to construct your UI dynamically from
   a set of standard React components.

:::tip Support
If you're interested in using AI.JSX in production, we're happy to provide first-class support. Ping us in [Discord](https://discord.fixie.ai) and we can set up a private Slack channel between your team and ours.
:::

## Getting started

To get started, follow the [Getting Started Guide](./getting-started), or check out the
[examples](https://github.com/fixie-ai/ai-jsx/tree/main/packages/examples).

AI.JSX can be used to create standalone LLM applications that can
be deployed anywhere Node.JS is supported, or it can be used as
part of a larger React application. We have examples that use
[Next.js](https://github.com/fixie-ai/ai-jsx/tree/main/packages/nextjs-demo)
and [Create React
App](https://github.com/fixie-ai/ai-jsx/tree/main/packages/create-react-app-demo).
For more details, see the [AI+UI guide](./guides/ai-ui).
You can also check out the [live demo app](https://ai-jsx-nextjs-demo.vercel.app/basic-completion).

New to the world of AI and LLMs? Read our [Guide for AI
Newcomers](https://docs.ai-jsx.com/ai-newcomers).

## Examples

Here is a simple example using AI.JSX to generate an AI response to a prompt:

```tsx
import * as AI from 'ai-jsx';
import { ChatCompletion, UserMessage } from 'ai-jsx/core/completion';

const app = (
  <ChatCompletion>
    <UserMessage>Write a Shakespearean sonnet about AI models.</UserMessage>
  </ChatCompletion>
);
const renderContext = AI.createRenderContext();
const response = await renderContext.render(app);
console.log(response);
```

Here's a more complex example that uses the built-in `<Inline>` component to progressively
generate multiple fields in a JSON object:

```tsx
function CharacterGenerator() {
  const inlineCompletion = (prompt: Node) => (
    <Completion stop={['"']} temperature={1.0}>
      {prompt}
    </Completion>
  );

  return (
    <Inline>
      Generate a character profile for a fantasy role-playing game in JSON format.{'\n'}
      {'{'}
      {'\n  '}"name": "{inlineCompletion}",
      {'\n  '}"class": "{inlineCompletion}",
      {'\n  '}"race": "{inlineCompletion}",
      {'\n  '}"alignment": "{inlineCompletion}",
      {'\n  '}"weapons": "{inlineCompletion}",
      {'\n  '}"spells": "{inlineCompletion}",
      {'\n}'}
    </Inline>
  );
}
```
